<template>
  <dialog_item :dialogTitle="$t('workweek_info')"  :visible.sync="standardDayDetailVisible" :appendBody="true" dialogClass="standardDetail" :isNotShowDefaultBtn="true">
    <el-main>
      <el-row class="obpm-fromContent-title obpm-enterpriseDomain-logo" :gutter="24" >
        <el-col :span="12">{{$t('set_workweek_working_hour')}}</el-col>
        <el-col :span="12" style="text-align:right">
          <span class="toolbar-buttons">
            <el-button type="primary" @click="onSaveBtn" size="small">{{$t('save')}}</el-button>
            <el-button type="primary"  @click="$emit('exit')"  size="small" plain>{{$t('exit')}}</el-button>
          </span>
        </el-col>
      </el-row>
      <!-- <el-row style="text-align:center">
        {{$t('set_workweek_working_hour')}}
      </el-row> -->
      
    </el-main>
    <el-form  label-position="left"  label-width="100px" size="small" class="standardForm contentPadding0">
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item :label="$t('work_week')">
            <el-input v-if="detail.weekDays === 0" value="Sunday" :disabled="true">
            </el-input>
            <el-input v-else-if="detail.weekDays === 1"  value="Monday" :disabled="true">
            </el-input>
            <el-input v-else-if="detail.weekDays === 2"  value="Tuesday" :disabled="true">
            </el-input>
            <el-input v-else-if="detail.weekDays === 3" value="Wednesday" :disabled="true">
            </el-input>
            <el-input v-else-if="detail.weekDays === 4" value="Thursday" :disabled="true">
            </el-input>
            <el-input v-else-if="detail.weekDays === 5" value="Friday" :disabled="true">
            </el-input>
            <el-input v-else-if="detail.weekDays === 6" value="Saturday" :disabled="true">
            </el-input>
            <!-- <el-input type="text" v-model="detail.weekDays" :disabled="true"></el-input> -->
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('run')" >
            <el-radio v-model="detail.workingDay" :label="false">{{$t('non_weekdays')}}</el-radio>
            <el-radio v-model="detail.workingDay" :label="true">{{$t('weekdays')}}</el-radio>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item :label="$t('spe_start_date')+'1'">
            <el-time-picker
              v-model="detail.startTime1"
              :picker-options="{
                selectableRange: '00:00:00- 23:59:00'
              }"
              format="HH:mm"
              value-format="HH:mm"
              :placeholder="$t('spe_select_date')"
              :disabled="!detail.workingDay">
            </el-time-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('spe_end_date')+'1'">
            <el-time-picker
              v-model="detail.endTime1"
              :picker-options="{
                selectableRange: '00:00:00- 23:59:00'
              }"
              format="HH:mm"
              value-format="HH:mm"
              :placeholder="$t('spe_select_date')"
              :disabled="!detail.workingDay">
            </el-time-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item :label="$t('spe_start_date')+'2'">
            <el-time-picker
              v-model="detail.startTime2"
              :picker-options="{
                selectableRange: '00:00:00- 23:59:00'
              }"
              format="HH:mm"
              value-format="HH:mm"
              :placeholder="$t('spe_select_date')"
              :disabled="!detail.workingDay">
            </el-time-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('spe_end_date')+'2'">
            <el-time-picker
              v-model="detail.endTime2"
              :picker-options="{
                selectableRange: '00:00:00- 23:59:00'
              }"
              format="HH:mm"
              value-format="HH:mm"
              :placeholder="$t('spe_select_date')"
              :disabled="!detail.workingDay">
            </el-time-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item :label="$t('spe_start_date')+'3'">
            <el-time-picker
              v-model="detail.startTime3"
              :picker-options="{
                selectableRange: '00:00:00- 23:59:00'
              }"
              format="HH:mm"
              value-format="HH:mm"
              :placeholder="$t('spe_select_date')"
              :disabled="!detail.workingDay">
            </el-time-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('spe_end_date')+'3'">
            <el-time-picker
              v-model="detail.endTime3"
              :picker-options="{
                selectableRange: '00:00:00- 23:59:00'
              }"
              format="HH:mm"
              value-format="HH:mm"
              :placeholder="$t('spe_select_date')"
              :disabled="!detail.workingDay">
            </el-time-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item :label="$t('spe_start_date')+'4'">
            <el-time-picker
              v-model="detail.startTime4"
              :picker-options="{
                selectableRange: '00:00:00- 23:59:00'
              }"
              format="HH:mm"
              value-format="HH:mm"
              :placeholder="$t('spe_select_date')"
              :disabled="!detail.workingDay">
            </el-time-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('spe_end_date')+'4'">
            <el-time-picker
              v-model="detail.endTime4"
              :picker-options="{
                selectableRange: '00:00:00- 23:59:00'
              }"
              format="HH:mm"
              value-format="HH:mm"
              :placeholder="$t('spe_select_date')"
              :disabled="!detail.workingDay">
            </el-time-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item :label="$t('spe_start_date')+'5'">
            <el-time-picker
              v-model="detail.startTime5"
              :picker-options="{
                selectableRange: '00:00:00- 23:59:00'
              }"
              format="HH:mm"
              value-format="HH:mm"
              :placeholder="$t('spe_select_date')"
              :disabled="!detail.workingDay">
            </el-time-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('spe_end_date')+'5'">
            <el-time-picker
              v-model="detail.endTime5"
              :picker-options="{
                selectableRange: '00:00:00- 23:59:00'
              }"
              format="HH:mm"
              value-format="HH:mm"
              :placeholder="$t('spe_select_date')"
              :disabled="!detail.workingDay">
            </el-time-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item :label="$t('description')">
            <el-input
              type="textarea"
              :rows="2"
              v-model="detail.remark">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      
    </el-form>
    </dialog_item>
</template>

<script>


export default {
  data(){
    return {
      detail:{},
    }
  },
  props:["visible","content"],
  computed:{
    standardDayDetailVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      }
    }
  },
  created() {
    this.detail=JSON.parse(JSON.stringify(this.content))
  },
  methods: {
    
    onSaveBtn(){
      if(this.detail.workingDay&&!this.detail.startTime1&&!this.detail.endTime1 && !this.detail.startTime2&&!this.detail.endTime2 &&!this.detail.startTime3&&!this.detail.endTime3 &&!this.detail.startTime4&&!this.detail.endTime4 &&!this.detail.startTime5&&!this.detail.endTime5){
        this.$message({
          showClose: true,
          message: this.$t('start_end_date_least'),
          type: "error"
        });
        return false;
      }

      let detail={
        "id": this.detail.id,
        "weekDays": this.detail.weekDays,
        "strstatus": this.detail.workingDay?"01":"02",
        "startTime1": this.detail.startTime1,
        "endTime1": this.detail.endTime1,
        "startTime2": this.detail.startTime2,
        "endTime2": this.detail.endTime2,
        "startTime3": this.detail.startTime3,
        "endTime3": this.detail.endTime3,
        "startTime4": this.detail.startTime4,
        "endTime4": this.detail.endTime4,
        "startTime5":this.detail.startTime5 ,
        "endTime5": this.detail.endTime5,
        "remark": this.detail.remark,
      }
      this.$api.saveStandardDay(
        {domainid:this.$route.query.domainid,id:this.content.calendar.id,data:detail},
        {
          onSucess: resp => {
            if(resp.data.errcode==0){
              this.$message({
                showClose: true,
                message: resp.data.data,
                type: "success"
              });
              this.$emit('exit')
            }else{
              this.$message({
                showClose: true,
                message: resp.data.errmsg,
                type: "error"
              });
            }
            
          },
          onError:()=>{
            this.$message({
              showClose: true,
              message:this.$t('save_failed'),
              type: "error"
            });
          }
        }
      );
      
    },
  },
};
</script>
<style lang="scss" scoped>
.standardForm{
  .el-input{
    width:80%;
  }
}
</style>